<!DOCTYPE html>
<html>
<head>
<title>订单列表_蘑菇街</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/order.css">
<link rel="stylesheet" type="text/css" href="css/iconfont/iconfont.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="./js/slideshow.js"></script>
	<script src="/webjars/jquery/3.4.1/jquery.min.js"></script>
	<script src="/webjars/jquery-cookie/1.4.1-1/jquery.cookie.js"></script>
	<script src="/webjars/vue/2.6.10/dist/vue.js"></script>
	<script src="/webjars/axios/0.19.0/dist/axios.js"></script>
<script>
  $(function(){
    $(".login_font").mouseover(function(){
      $(this).find("#service").show();//显示
    })
    $(".login_font").mouseleave(function(){
      $("#service").hide();
    })
    $(".login_font").mouseover(function(){
      $(this).find("#service_one").show();//显示
    })
    $(".login_font").mouseleave(function(){
      $("#service_one").hide();
    })
    $(".login_font").mouseover(function(){
      $(this).find("#service_two").show();//显示
    })
    $(".login_font").mouseleave(function(){
      $("#service_two").hide();
    })
    $(".order_ul li").mouseover(function(){
      $("#order_two").hide();
      $("#vip").hide();
      $(this).find("#order_two").show();
    })
    $(".order_ul li").mouseleave(function(){
      $(this).find("#order_two").hide();
      $("#vip").show();
    })
   
})
</script>
</head>
<body>
<div id="vuebox">
<div id="index" style="width: 1900px">
    <ul class="index_menu">
		<li class="index_font">
			<a href="index.html"><i class="iconfont icon-1" style="font-size: 13px;color: #666"></i>  蘑菇街首页</a>
		</li>


		<li class="login_font login_one">
			<a href="login.html" v-if="account==null">登录</a>
			<a href="#" v-if="account!=null">{{account}}</a>
			<a href="" style="font-size: 12px;color: #DDDDDD;margin:3px;">&nbsp;&nbsp;&nbsp;|</a>
		</li>
		   
		<li class="login_font">
		    <a href=""><i class="iconfont icon-index2" style="font-size: 10px;"></i> 我的订单</a> 
		    <a href="" style="font-size: 12px;color: #DDDDDD;margin:3px;">&nbsp;&nbsp;&nbsp;|</a>
		</li>
		   
		<li class="login_font">
		    <a href=""><i class="iconfont icon-cart" style="font-size: 18px;color: #ff0077;"></i> 购物车</a>
		    <a href="" style="font-size: 12px;color: #DDDDDD;margin:3px;">&nbsp;&nbsp;&nbsp;|</a>
		    <div id="service_one">
				<ul>
					<li><a href="">购物车里没有商品！点击前往</a></li>
				</ul>
		    </div>
		</li>
		    
		<li class="login_font">
		    <a href="" >客户服务 <i class="iconfont icon-moreunfold"></i></a>
		    <a href="" style="font-size: 12px;color: #DDDDDD;margin:3px;">&nbsp;&nbsp;&nbsp;|</a>
		    <div id="service">
				<ul>
					<li><a href="">消费者服务</a></li>
					<li><a href="">商家服务</a></li>
					<li><a href="">规则中心</a></li>
				</ul>
		    </div>
		</li>
		    
		<li class="login_font">
		    <a href=""><i class="iconfont icon-yunxiaodian" style="font-size: 15px;color: #eb2a12"></i>  我的小店</a>
		    <div id="service_two">
				<ul>
					<li><a href="">后台管理</a></li>
					<li><a href="">商家社区</a></li>
					<li><a href="">商家培训</a></li>
					<li><a href="">市场入驻</a></li>
				</ul>
		    </div>
		</li>
    </ul>
</div>
<div id="fixed">
	<ul>
		<li>
			<a href=""><i class="iconfont icon-cart1" style="font-size: 14px;"></i>购物车</a>

		</li>
		<div class="line"></div>
		<li>
			<a href=""><i class="iconfont icon-coupon" style="font-size: 14px;"></i>优惠券</a>
		</li>
		<div class="line"></div>
		<li>
			<a href=""><i class="iconfont icon-wealthselected" style="font-size: 14px;"></i>钱包</a>
		</li>
		<div class="line"></div>
		<li>
			<a href=""><i class="iconfont icon-foot" style="font-size: 14px;"></i>足迹</a>
		</li>
		<div class="line"></div>
	</ul>

</div>
<div id="head">
    <div id="logo">
		<a href=""><img src="img/logo.png"></a>
    </div>
    <div id="search_box" style="position: relative;left: 300px">
        <div id="search_font">
			<ul>
				<li><a href="">搜商品</a><i class="iconfont icon-sanjiaoxing02" style="color: #ff0077;"></i></li>
			</ul>
        </div>
        <div>
          <form action="">
			<input type="text" name="" class="input_box" placeholder="高腰时尚套装">
			<button type="submit" class="search">搜索</button>
			</form>
		</div>
		 <div id="out_search_font">
		<ul>
			<li class="">
			<a href="">牛仔哈伦裤</a>
			<a href="">沙发巾</a>
			<a href="">秋季男鞋</a>
			<a href="">拉杆箱</a>
			<a href="">化妆收纳包</a>
			</li>
		</ul>
    </div>
    </div>
</div>
<div id="body_wrap" style="width: 1875px">
	<div id="mu_wrap">
		<div class="mu_nav_wrap" style="position: relative;left: 200px">
			<div class="mu_nav_info">
				<img src="img/888888.PNG">
				<p>Michael</p>
			</div>
			<div class="mu_expand">
				<div class="mu_expand_my">
					<p>我的订单 ></p>
				</div>
				<div class="mu_expand_my">
					<p>我的钱包 ></p>
				</div>
				<div class="mu_expand_my">
					<p>优惠特权 ></p>
				</div>
				<div class="mu_expand_my">
					<a href="address.html"><p>地址管理 ></p></a>
				</div>
				<div class="mu_expand_my">
					<p>安全设置 ></p>
				</div>
				<div class="mu_expand_my">
					<p>维权管理 ></p>
				</div>
				<div class="mu_expand_my">
					<p>账号设置 ></p>
				</div>
			</div>
		</div>

		<div class="col-sm-5" style="position: relative;left: 400px;top: 70px;">
			<input type="text" class="form-control" id="firstname" v-model="ordenum" placeholder="请输入订单号">
			<button type="button" @click="seleorder()" class="btn btn-default" style="position: relative;left: 500px;top: -33px;">查找</button>
		</div>

		<div class="mu_content_wrap" style="position: relative;left: 200px;top: 100px">
			<div class="order_title" >
				<ul>
					<li class="goods">商品</li>
					<li class="price">单价（元）</li>
					<li class="quantity">数量</li>
					<li class="aftersale">售后</li>
					<li class="total">实付款</li>
					<li class="status">交易状态</li>
					<li class="other">操作</li>
				</ul>
			</div>
			<div class="order_table" v-for="item in order">
				<div class="order_table_header">
					<ul>
						<li><p>订单编号： <span>{{item.ordenum}}</span></p></li>
						<li><p>成交时间：<span>{{item.yesdate}}</span></p></li>
						<li><a href="">店铺：{{item.shop.shopname}}</a></li>
						<li><a href=""><i class="iconfont icon-lianxikefu-PC" style="color: #20b8fc;margin-right: 5px;"></i>联系商家</a></p></li>
					</ul>
				</div>
				<div class="goods_table_left">
					<a href=""><img :src="item.commodity.headpic" style="width: 70px"></a>
					<div class="goods_table_font">
						<ul>
							<li style="position: relative;top: 20px;"><a href="">{{item.commodity.commname}} </a></li>
							<!--<li><p>颜色：白+灰 </p></li>-->
							<!--<li><p>尺码：S </p></li>-->
						</ul>
					</div>
				</div>
				<div class="price_one">
					<p class="price_one_p1" style="position: relative;top: 20px;">{{item.money+80}}</p>
					<p class="price_one_p2" style="position: relative;top: 20px;">{{item.money}}</p>
				</div>
				<div class="num_table">
					<p style="position: relative;top: 40px;left: 50px;">{{item.commodity.count}}</p>
				</div>
				<div class="aftersale_table">

				</div>
				<div class="total_table">
					<p class="total_table_p1" style="position: relative;top: 20px;">￥{{item.money}}</p>
					<p class="total_table_p2" style="position: relative;top: 20px;">(全国包邮)</p>
				</div>
				<div class="total_table">
					<p class="total_table_p4" style="position: relative;top: 50px;" v-if="item.status==1">交易完成</p>
					<p class="total_table_p4" style="position: relative;top: 50px;"  v-if="item.status==0">交易取消</p>
				</div>
				<div class="total_table">
					<p class="total_table_p5" style="position: relative;top: 35px;"><a href="javascript:;" @click="deleteorder(item.id)">删除订单</a></p>
				</div>
			</div>
		</div>
	</div>
	
</div>
<div id="ending"  style="position: relative;left: 270px;">
	<div id="ending_head">
		<div class="help">
			<h5>-新手帮助-</h5>
			<ul class="help_ul">
				<li><a href="">常见问题</a></li>
				<li><a href="">自助服务</a></li>
				<li><a href="">联系客服</a></li>
				<li><a href="">意见反馈</a></li>
			</ul>
		</div>
		<div class="help">
			<h5>-权益保障-</h5>
			<ul class="help_ul">
				<li><a>全国包邮</a></li>
				<li><a>7天无理由退货</a></li>
				<li><a>退货运费补贴</a></li>
				<li><a>限时发货</a></li>
			</ul>
		</div>
		<div class="help">
			<h5>-支付方式 -</h5>
			<ul class="help_ul">
				<li><a>微信支付</a></li>
				<li><a>支付宝</a></li>
				<li><a>白付美支付</a></li>
			</ul>
		</div>
		<div class="help">
			<h5>-移动客户端下载 -</h5>
			<ul class="help_ul">
				<li><a>蘑菇街</a></li>
				<li><a>美丽说</a></li>
				<li><a>uni引力</a></li>
			</ul>
		</div>
	</div>
	<div class="ending_end">
		<ul class="ending_font">
			<li><a href="">关于我们</a></li>
			<li><a href="">招聘信息</a></li>
			<li><a href="">联系我们</a></li>
			<li><a href="">商家入驻</a></li>
			<li><a href="">商家后台</a></li>
			<li><a href="">蘑菇商学院</a></li>
			<li><a href="">商家社区</a></li>
			<li><a href="">规则中心</a></li>
		</ul>
		<p>©2017 Mogujie.com 杭州卷瓜网络有限公司</p>
	</div>
	<div class="ending_end">
		<p>
			<span>营业执照注册号：</span>
			<a href="">330106000129004</a>
			<b> | </b>
			<span>网络文化经营许可证：</span>
			<a href="">浙网文（2016）0349-219号</a>
			<b> | </b>
			<span>增值电信业务经营许可证：</span>
			<a href="">浙B2-20110349</a>
			<b> | </b>
			<span>增值电信业务经营许可证：</span>
			<b> | </b>
			<a href="">浙公网安备 33010602002329号</a>
			<b> | </b>
		</p>
	</div>
</div>
</div>
</body>
</html>

<script>
    var vm = new Vue({
        el:"#vuebox",
        data : {
            order:{},
            ordenum:"",
			account:""
        },
        methods : {
            seleorder:function () {
				 axios.get("/order/selectOrderAndComm",{
				     params:{
                         ordenum:this.ordenum
					 }
				 }).then(res=>{
				     this.order = res.data
				 })
            },
            deleteorder:function (id) {
				 axios.get("/order/deleteOrder",{
				     params:{
				         id:id
					 }
				 }).then(res=>{
				     if(res.data.status=="删除成功"){
				          this.seleorder();
					 }else{
                         alert("删除失败");
				     }
				 })
            }
        },
        mounted(){
            this.account = sessionStorage.getItem("realname")
			this.seleorder()
        }
    });
</script>